<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="视频通话"
    width="600px"
    @closed="deleteVideo"
    destroy-on-close
    :modal="false"
    :close-on-click-modal="false"
    custom-class="deep"
  >
    <video
      id="my-player"
      class="video-js vjs-default-skin vjs-big-play-centered vjs-fluid"
      preload="auto"
      autoplay
      style="width: 600px; height: 320px"
      controls
      data-setup="{}"
    ></video>
    <div
      class="dusy"
      v-if="fullscreenLoading"
      v-loading="fullscreenLoading"
      element-loading-background="rgba(0, 0, 0, 0.4)"
    ></div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="forbiddenSpeech" size="mini">一键禁言</el-button>
      <el-button type="primary" @click="unForbiddenSpeech" size="mini">一键解除禁言</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { deleteConference,
  createVideoConference,
  unForbiddenSpeech,
  forbiddenSpeech } from '../../utils/api.js';
import 'videojs-flash';
import 'video.js/dist/video-js.css';
import '../../utils/flv.min.js';
export default {
  name:"callVideo",
  props: {
    phoneNum: null
  },
  data () {
    return {
      dialogVisible: null,
      groupId: null,
      conferenceNumber: null,
      videoPlayer: null,
      fullscreenLoading: true,
    }
  },
  methods: {
    call(phone) {
      let self = this;
      this.dialogVisible = true;
      // params.userPhone = 8011 // 测试号码
      createVideoConference({ phoneNumber: 8011 })// '8011,8079,8077'
        .then((res) => {
          let src = res.data.data.data.ws;
          self.groupId = res.data.data.data.groupId;
          self.conferenceNumber = res.data.data.data.conferenceNumber;
          self.startPlay(src);
        })
        .finally(() => {
          this.fullscreenLoading = false;
        });
    },
    startPlay(src) {
      if (flvjs.isSupported()) {
        const videoElement = document.getElementById('my-player');
        const flvPlayer = flvjs.createPlayer(
          {
            type: 'flv',
            isLive: true,
            hasAudio: false,
            url: src, //WebSocket 地址
          },
          {
            enableStashBuffer: true,
            stashInitialSize: 128,
          }
        );
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
        this.unForbiddenSpeech();
      } else {
        console.log('flvjs不支持');
        this.$message.error('当前浏览器不支持此次通话');
      }
    },
    deleteVideo() {
      if (this.videoPlayer != null) {
        //判断是否已经初始化视频
        this.videoPlayer.dispose(); //销毁video
      }
      deleteConference({ groupId: this.groupId, conferenceNumber: this.conferenceNumber }).then(() => {
      });
    },
    forbiddenSpeech() {
      forbiddenSpeech({ conferenceNumber: this.conferenceNumber }).then(() => {
        this.$message.success('禁言成功');
      });
    },
    unForbiddenSpeech() {
      unForbiddenSpeech({ conferenceNumber: this.conferenceNumber }).then(() => {
        this.$message.success('解除禁言成功');
      });
    }
  },
  mounted(){
    window._yhZfyInit = this.call;
  }
}
</script>
<style scoped>
.el-dialog__wrapper {
  width: 3096px;
  overflow: unset !important;
}
</style>